import React from 'react'
// import style from './style.module.scss'
import './style.scss'
import Search from '../Search'

function Index (props) {
  let headerData = {
    c1: ['无障碍1', '无障碍2', '无障碍3', '无障碍4'],
    kftel: [
      { words: '国内客服', num: '95117' },
      { words: '国际客服', num: '(+8610)59606999' }],
    nav: ['首页', '首页', '首页'],
    minnav: ['境外酒店', '境外酒店', '境外酒店'],
  }
  let c1vdom = headerData.c1.map(r => <li>{r}</li>)
  let kftelvdom = headerData.kftel.map(
    r => <li><span>{r.words}</span><span>{r.num}</span></li>)
  let navvdom = headerData.nav.map(r => <li>{r}</li>)
  let minnavvdom = headerData.minnav.map(
    r => <li><i className="f-icon"></i><span>{r}</span></li>)

  return (
    <div className="header">
      <div className="header-c1 f-content">
        <ul>
          {c1vdom}
        </ul>
      </div>
      <div className="header-c2 f-content">
        <div className="logo"></div>
        <Search/>
        <div className="hdkfwrapper">
          <div className="hdkf">24小时</div>
          <ul>
            {kftelvdom}
          </ul>
        </div>
      </div>
      <div className="header-c3">
        <div className="hdnav">
          <div className="f-content">
            <ul>
              <li className="active">首页</li>
              {navvdom}
            </ul>
          </div>
        </div>
        <div className="hdminnav">
          <div className="f-content">
            <ul>
              <li><div>境外直通车</div><i className='l-sj'></i></li>
              {minnavvdom}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
